<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker simple datePicker demo</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				$('.date-pick')
					.datePicker()
					.bind(
						'focus',
						function()
						{
							$(this).dpDisplay();
						}
					).bind(
						'blur',
						function(event)
						{
							// works good in Firefox... But how to get it to work in IE?
							if ($.browser.mozilla) {

								var el = event.explicitOriginalTarget
								
								var cal = $('#dp-popup')[0];
							
								while (true){
									if (el == cal) {
										return false;
									} else if (el == document) {
										$(this).dpClose();
										return true;
									} else {
										el = $(el).parent()[0];
									}
								}
							}
						}
					);
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: datePicker which appears on focus.</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                This example shows how to bind the focus and blur events on an element to the
				dpDisplay and dpClose functions to make the date picker popup when the element
				receives focus and disappear when the element is blurred.
            </p>
			<form name="chooseDateForm" id="chooseDateForm" action="#">
				<fieldset>
					<legend>Test date picker form</legend>
                    <ol>
                        <li>
                            <label for="date1">Date 1:</label>
							<input name="date1" id="date1" class="date-pick" />
						</li>
                        <li>
                            <label for="date2">Date 2:</label>
							<input name="date2" id="date2" class="date-pick" />
						</li>
                        <li>
                            <label for="test-select">Test select:</label>
                            <select name="test-select" id="test-select" style="width: 170px">
                                <option value="1">Test SELECT </option>
                                <option value="2">Doesn't shine through</option>
                                <option value="3">Even in IE</option>
                                <option value="4">Yay!</option>
                            </select>
                        </li>
					</ol>
				</fieldset>
			</form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">
$(function()
{
	$('.date-pick')
		.datePicker()
		.bind(
			'focus',
			function()
			{
				$(this).dpDisplay();
			}
		).bind(
			'blur',
			function(event)
			{
				// works good in Firefox... But how to get it to work in IE?
				if ($.browser.mozilla) {

					var el = event.explicitOriginalTarget
					
					var cal = $('#dp-popup')[0];
				
					while (true){
						if (el == cal) {
							return false;
						} else if (el == document) {
							$(this).dpClose();
							return true;
						} else {
							el = $(el).parent()[0];
						}
					}
				}
			}
		);
});</pre>
			<h2>Page CSS</h2>
			<pre class="sourcecode">
/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}</pre>
        </div>
	</body>
</html>